import React, { useEffect } from 'react'
import propTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import Swiper from 'swiper'
import { Wrapper } from './style'

export default function HomeDetailNav({ id }) {
    let swiper = null;
    useEffect(() => {
        if (swiper) return;
        swiper = new Swiper('.navbar')
    }, [])
    // 页面二级路由的导航准备
    let homeNavs = [
        { id: 1, desc: '点餐', path: '/order' },
        { id: 2, desc: '评价', path: '/comment' },
        { id: 3, desc: '商家', path: '/business' },
    ]
    // RESTFUL是一种网络应用程序的设计风格和开发方式，
    // 基于HTTP，可以使用XML格式定义或JSON格式定义。
    // RESTFUL适用于移动互联网厂商作为业务接口的场景，
    // 实现第三方OTT调用移动网络资源的功能，
    // 动作类型为新增、变更、删除所调用资源。
    return (
        <Wrapper>
            <div className="navbar swiper-container">
                <div className="nav-box swiper-wrapper">
                    {homeNavs.map((item, index) => {
                        return (
                            <NavLink
                                index={index}
                                to={`/homedetail/${id}${item.path}`}
                                key={item.id}
                                className="nav-item swiper-slide"
                            >
                                {item.desc}
                            </NavLink>
                        );
                    })}
                </div>
            </div>
        </Wrapper>
    );
}

HomeDetailNav.propTypes = {
    id: propTypes.string.isRequired,
}
